<template>
  <section class="footer">
    <keep-alive>
      <router-view :key="$route.fullPath"/>
    </keep-alive>
    <cube-tab-bar
      v-if="$route.meta.footerShow"
      v-model="selectedLabelDefault"
      :data="tabs"
      class="nar"
      @click="clickHandler"
      @change="changeHandler">
    </cube-tab-bar>
    <span class="countSum"  v-if="$route.meta.footerShow">0</span>
  </section>
</template>

<script>
export default {
  name: 'Footer',
  data () {
    return {
      selectedLabelDefault: '首页',
      tabs: [
        {
          label: '首页',
          icon: 'cubeic-home'
        },
        {
          label: '分类',
          icon: 'cubeic-tag'
        },
        {
          label: '搜索',
          icon: 'cubeic-search'
        },
        {
          label: '购物车',
          icon: 'cubeic-mall'
        },
        {
          label: '我的',
          icon: 'cubeic-person'
        }
      ],
      liat: [
        {
          'id': 0,
          'imgUrl': 'https://m.360buyimg.com/mobilecms/jfs/t18526/211/696109898/3876/a61be82c/5aa10cd2N1318ac50.png',
          'imgUrlSelection': 'https://m.360buyimg.com/mobilecms/jfs/t15145/137/2502885754/3106/de5e0b14/5aa10cd2N46f18ce6.png'
        },
        {
          'id': 1,
          'imgUrl': 'https://m.360buyimg.com/mobilecms/jfs/t19183/49/696491919/3763/dec8cceb/5aa10cdbNa9cd0320.png',
          'imgUrlSelection': 'https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/33669/19/3432/3731/5cb48c9cEb2f5593b/060ffe532d67562b.png'
        },
        {
          'id': 2,
          'imgUrl': 'https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/75691/7/2686/3970/5d106e75Ee420adf7/cb4579470ee8ca22.png',
          'imgUrlSelection': '//img20.360buyimg.com/jdphoto/jfs/t29080/216/1380810163/1931/c50957b9/5cdea5ffN1da4114f.png!q70.webp'
        },
        {
          'id': 3,
          'imgUrl': 'https://m.360buyimg.com/mobilecms/jfs/t18583/69/717127328/4407/5e47882b/5aa10ceaN649eec12.png',
          'imgUrlSelection': 'https://m.360buyimg.com/mobilecms/jfs/t18583/69/717127328/4407/5e47882b/5aa10ceaN649eec12.png'
        },
        {
          'id': 4,
          'imgUrl': 'https://m.360buyimg.com/mobilecms/jfs/t16849/271/702371255/4462/d55edd83/5aa10cf6Nee5122a5.png',
          'imgUrlSelection': 'https://m.360buyimg.com/mobilecms/jfs/t18598/41/712219415/3756/7828621f/5aa10cf6Nbfbdc1af.png'
        }
      ]
    }
  },
  mounted () { // 解决跳转页面后路由不跟着跳转 解决刷新页面后路由自动跑回首页的问题
    switch (this.$route.path) { // 调取当前页面的路由 解决点击购物车没有demo的时候登录后自动跳到购物车页面
      case '/footer/home':
        this.selectedLabelDefault = '首页'
        break
      case '/footer/list':
        this.selectedLabelDefault = '分类'
        break
      case '/footer/search':
        this.selectedLabelDefault = '搜索'
        break
      case '/footer/cart':
        this.selectedLabelDefault = '购物车'
        break
      case '/footer/mine':
        this.selectedLabelDefault = '我的'
        break
    }
  },
  methods: {
    clickHandler (label) { // 如果单击选项卡，则打印'选项卡内容'
      console.log(label)
    },
    changeHandler (label) { // 如果单击不同的选项卡，则可以发出此方法
      console.log(label)
      switch (label) { // 点击跳转
        case '首页':
          this.$router.push('/footer/home')
          break
        case '分类':
          this.$router.push('/footer/list')
          break
        case '搜索':
          this.$router.push('/footer/search')
          break
        case '购物车':
          this.$router.push('/footer/cart')
          break
        case '我的':
          this.$router.push('/footer/mine')
          break
      }
    },
    handleSelect (id) {
      console.log(id)
    }
  },
  watch: {
    $route () { // 监听$route
      this.handleSelect(this.$route.path) // 要高亮的菜单index
    }
  }
}
</script>

<style lang="stylus" scoped>
  .cube-tab-bar.nar // 类名并着  提高权重
    overflow-x hidden
    position fixed
    bottom 0
    left 0
    right 0
    z-index 99
    width 100%
    background #fff
    box-shadow 0 -1.5px 5px #e2dcdc
  .footer >>> .cube-tab-bar .cube-tab
    padding 5.05px 0
    div
      font-size 14px
      margin-top 2px
    i
      font-size 23px
  .footer >>> .cube-tab-bar .cube-tab.cube-tab_active
    color: #4CAF50
  .countSum
    position fixed
    bottom 31px
    right 23%
    z-index 100
    width 18px
    height 18px
    line-height 18px
    border-radius 50%
    font-size 14px
    color #ffffff
    background red
    text-align center
</style>
